<template>
  <div class="line-chart-group">
    <div class="time-box">
      <el-dropdown @command="changeTime" class="drop">
        <span class="el-dropdown-link">
          {{selectTime.label}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in timeList"
            :key="item.id"
            :command="item.id"
          >{{item.label}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <span class="title">设备名称{{deviceName}}</span>
    </div>
    <el-row>
      <el-col :span="12">
        <line-chart
          headTitle="温度"
          color="#5bb2ff"
          chartId="tempLineChart"
          :chartData="TEMPERATUREChartData"
          :timeData="TEMPERATURETimeData"
          :min="TEMPERATUREChartData.length > '0' ? 'dataMin' : '-10'"
          :max="TEMPERATUREChartData.length > '0' ? 'dataMax' : '50'"
          unit="℃"
        />
      </el-col>
      <el-col :span="12">
        <line-chart
          headTitle="湿度"
          color="#5bb2ff"
          chartId="waterLineChart"
          :chartData="HUMIDITYChartData"
          :timeData="HUMIDITYTimeData"
          :min="HUMIDITYChartData.length > '0' ? 'dataMin' : '1'"
          :max="HUMIDITYChartData.length > '0' ? 'dataMax' : '100'"
          unit="%"
        />
      </el-col>
      <el-col :span="12">
        <line-chart
          headTitle="CO₂"
          color="#5bb2ff"
          chartId="co2Chart"
          :chartData="CO2ChartData"
          :timeData="CO2TimeData"
          :min="CO2ChartData.length > '0' ? 'dataMin' : '300'"
          :max="CO2ChartData.length > '0' ? 'dataMax' : '5000'"
          unit="ppm"
        />
      </el-col>
      <el-col :span="12">
        <line-chart
          headTitle="PM2.5"
          color="#5bb2ff"
          chartId="pmLineChart"
          :chartData="PM25ChartData"
          :timeData="PM25TimeData"
          :min="PM25ChartData.length > '0' ? 'dataMin' : '0'"
          :max="PM25ChartData.length > '0' ? 'dataMax' : '1000'"
          unit="ug/m3"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import LineChart from "./components/lineChart";
import { getData } from "@/api/deviceManage";
import { formatDate } from "@/utils/utils";
export default {
  name: "lineChartGroup",
  components: {
    LineChart
  },
  props: {
    deviceId: String,
    deviceName: String
  },
  data() {
    return {
      TEMPERATUREChartData: [],
      TEMPERATURETimeData: [],
      HUMIDITYChartData: [],
      HUMIDITYTimeData: [],
      CO2ChartData: [],
      CO2TimeData: [],
      PM25ChartData: [],
      PM25TimeData: [],
      timeList: [
        {
          id: 1,
          label: "近一天"
        },
        {
          id: 7,
          label: "近一周"
        }
      ],
      selectTime: {
        id: 1,
        label: "近一天"
      }
    };
  },
  watch: {
    deviceId() {
      this.getAllData();
    }
  },
  methods: {
    changeTime(e) {
      for (let i = 0; i < this.timeList.length; i++) {
        const element = this.timeList[i];
        if (element.id == e) {
          this.selectTime = element;
        }
      }
      this.getAllData();
    },
    getAllData() {
      var start = "";
      var end = new Date().getTime();
      if (this.selectTime.id == 1) {
        start = new Date().getTime() - 3600 * 1000 * 24;
      } else if (this.selectTime.id == 7) {
        start = new Date().getTime() - 3600 * 1000 * 24 * 7;
      }
      // 温度
      let temperatureData = {
        deviceId: this.deviceId,
        type: "TEMPERATURE",
        start,
        end
      };

      // 湿度
      let humidityData = {
        deviceId: this.deviceId,
        type: "HUMIDITY",
        start,
        end
      };

      // CO2
      let co2Data = {
        deviceId: this.deviceId,
        type: "CO2",
        start,
        end
      };

      // PM25
      let pm25Data = {
        deviceId: this.deviceId,
        type: "PM25",
        start,
        end
      };
      let that = this;
      // 温度
      getData(temperatureData).then(res => {
        let data = res.value;
        that.handleData(data.data).then(result => {
          let { xData, yData } = result;
          // console.log(xData, yData);
          this.TEMPERATUREChartData = yData;
          this.TEMPERATURETimeData = xData;
        });
      });

      // 湿度
      getData(humidityData).then(res => {
        let data = res.value;
        that.handleData(data.data).then(result => {
          let { xData, yData } = result;
          // console.log(xData, yData);
          this.HUMIDITYChartData = yData;
          this.HUMIDITYTimeData = xData;
        });
      });

      // CO2
      getData(co2Data).then(res => {
        let data = res.value;
        that.handleData(data.data).then(result => {
          let { xData, yData } = result;
          // console.log(xData, yData);
          this.CO2ChartData = yData;
          this.CO2TimeData = xData;
        });
      });

      // PM2.5
      getData(pm25Data).then(res => {
        let data = res.value;
        that.handleData(data.data).then(result => {
          let { xData, yData } = result;
          this.PM25ChartData = yData;
          this.PM25TimeData = xData;
        });
      });
    },

    handleData(data) {
      return new Promise((resolve, reject) => {
        let xData = [];
        let yData = [];
        for (let i = 0; i < data.length; i++) {
          data[i].ts = formatDate(new Date(data[i].ts));
          data[i].val = Number(data[i].val.toFixed(1));
          xData.push(
            data[i].ts.substring(5, 10) + "\n" + data[i].ts.substring(11, 16)
          );
          yData.push(data[i].val);
        }
        resolve({ xData, yData });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.line-chart-group {
  background-color: #fff;
  width: 100%;
  height: 312px;
  background-color: #fff;
  border-radius: 12px;
  padding: 10px 20px;
}
.time-box {
  text-align: center;
  position: relative;
  .title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 24px;
    color: #0a0a0a;
    margin-bottom: 20px;
  }
  .drop {
    position: absolute;
    right: 0;
  }
}
.el-dropdown-link {
  cursor: pointer;
}
</style>
